<template>
  <div class="new">
    <div class="one" id="top">
      <div class="horizontal-list">
        <li class="label">备注： <span> {{ noteName}}</span></li>
        <li class="label">微信昵称： <span>{{userName }}</span></li>
        <li class="label">微信号： <span>{{userId }}</span></li>
        <li class="label">发布时间： <span>{{rtime}}</span></li>
      </div>
    </div>
    <div style="display: flex;" v-if="wcMoments!=''&&wcMoments!=null">
      <div class="left">
        <p v-if="wcMoments.releaseDetail!=''&&wcMoments.releaseDetail!=null">{{ wcMoments.releaseDetail.text!=''&&wcMoments.releaseDetail.text!=null?wcMoments.releaseDetail.text:''}}</p>
        <div class="images" v-if="wcMoments.releaseDetail!=''&&wcMoments.releaseDetail!=null">
          <image-preview v-for="item,index in wcMoments.releaseDetail.media_list" :key="index" class="tu" :src="item"></image-preview>
        </div>
        <!-- <div class="detail" v-html="wcMoments.releaseDetail"></div> -->
        <div class="love">
          <span v-if="wcMoments.likeState==1"><span style="color: red;">❤</span><!-- <span style="font-size: 14px;">取消</span> --></span>
          <span  @click="toggleLove(1)" v-else>❤ <span style="font-size: 14px;">赞</span></span>
        </div>
      </div>

      <div class="right">
        <h3>评论</h3>
        <div style="display: flex;flex-direction: column;overflow-y: scroll;height: 460px;">
          <div class="right_one" v-for=" item,index in comments" :key="index" :style="index==comments.length-1?'border-bottom:none;':''">
            <div class="one"><span id="a">{{ item.wcName }}</span><span>{{ item.commentTime }}</span></div>
            <div class="two">{{ item.commentDetail }}</div>
          </div>
          <span v-if="comments==''||comments==null" style="color:#8c8c8c;font-size: 14px;text-align:center;">暂无评论信息</span>
        </div>
      </div>
    </div>
    
    <div class="bottom">
      <div class="dialog">
        <div class="dia-box">
          <div><svg-icon icon-class="xiaolian" @click="toggleEmojiPicker" style="margin-right: 10px;"/>
          </div>
          <!-- <textarea v-model="message" @keyup.enter="sendMessage" placeholder="请输入文本，点击按钮/按回车发送"></textarea> -->
          <el-autocomplete
                  type="textarea" 
                  rows="4" 
                  :maxlength="460"
                  popper-class="my-autocomplete"
                  v-model="message"
                  ref="autocomplete"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入文本或选择，点击按钮/按回车发送"
                  @select="handleSelect">

                  <template slot-scope="{ item }">
                    <div class="name">{{ item.label }}</div>
                  </template>
          </el-autocomplete>
          <VEmojiPicker v-show="showEmojiPicker" @select="addEmoji" :style="{ width: '50%', height: '100' }"/>
          <div class="dia-btn">
            <el-button class="blue-button" @click="sendMessage">评论</el-button>
          </div>
          <!-- 表情面板 -->
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import moment from "moment";
import request from '@/utils/request';
import { VEmojiPicker } from 'v-emoji-picker'
export default {
  name: 'new',
  components: {
    VEmojiPicker
  },
  data() {
    return {
      wcFriendInfo:null,
      wcMoments:null,
      comments:null,
      showEmojiPicker: false, // 控制表情选择面板的显示
      message: '', // 文本框的内容
      id: '',
      wcId:'',
      rtime:'',
      wcName:'',
      userId:'',
      noteName:'',
      userName:'',
     
    };
  },
  created(){
    this.id = this.$route.query.id;
    this.wcId = this.$route.query.wcId;
    this.rtime=this.$route.query.rtime
    this.wcName=this.$route.query.wcName
    this.userId=this.$route.query.userId
    this.userName=this.$route.query.userName
    this.noteName=this.$route.query.noteName
  },
  mounted() {
    this.getPage()
    this.getFriendDetails(this.id);
  },
  methods: {
    toggleLove() {
      updateWcMoments([{ id: this.id, WcId: this.wcId }]).then(res=>{
        this.$modal.msgSuccess("操作成功");
        this.wcMoments.likeState=1
      })
    },
    toggleEmojiPicker() {
      this.showEmojiPicker = !this.showEmojiPicker; // 切换表情选择面板的显示
    },
    addEmoji(emoji) {
      this.message += emoji.data; // 将选中的表情添加到文本框中
      this.showEmojiPicker = false; // 选择表情后关闭面板
    },
    // 评论
    sendMessage() {
      if (this.message.trim() !== '') {
        const data = {
          momentId: this.id,
          wcId: this.wcId,
          wcName: this.wcName,
          commentDetail: this.message,
          commentTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        };
        //console.log(data)
        addMoments(data).then(res=>{
          this.message=""
          this.$modal.msgSuccess("评论成功");
          this.getFriendDetails(this.id);
        })
       
      }
    },
    getPage(){
      page({pageNum: 1,pageSize: 999,termType:1}).then(res => {
        //console.log(res)
        if (res['success']) {
          const dt = res['data'];
          this.total = dt['total'];
          this.pageList =dt['records'].map(key => {
            return {label:key.content,value:key.termId}
          })
        }
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.pageList;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.message=item.label
    },
    // 获取朋友圈详情
    getFriendDetails(id) {
      getFriendDetails({id}).then(res => {
        if (res) {
          //console.log(res, 'sssssssssss');
          this.data = res.data;
          this.wcFriendInfo = res.data.wcFriendInfo;
          if(res.data.wcFriendInfo!=''&&res.data.wcFriendInfo!=null){
            this.wcFriendInfo={wcNoteName:this.$route.query.noteName,wcUserName:this.$route.query.userName,wcUserId:this.$route.query.userId,createTime:this.$route.query.rtime}
          }
          
          if(res.data.wcMoments!=null&&res.data.wcMoments!=''){
            res.data.wcMoments.releaseDetail=JSON.parse(res.data.wcMoments.releaseDetail)
          }
          this.wcMoments=res.data.wcMoments;
          this.comments=res.data.wcMomentsComments;
        }
      });
    }

  },
};

/** js请求 调用 */
// 查询朋友圈详情页信息
export function getFriendDetails(data) {
  return request({
    url: '/wcMoments/getRamonDetails',
    method: 'post',
    params:data // 发送id作为数字
  })
}
export function updateWcMoments(data) {
  return request({
    url: '/wcMoments/editRamonById',
    method: 'post',
    data: data // 直接将对象作为请求体发送
  })
}
export function addMoments(data) {
  return request({
    url: '/moments/wccomment/add',
    method: 'post',
    data: data // 直接将对象作为请求体发送
  })
}
// 查询助手招呼语设置列表
export function page(query) {
   return request({
     url: '/wcUserTerms/page',
     method: 'get',
     params: query
   })
}
</script>
<style lang="scss">

   .my-autocomplete {
    width: 500px;
     li {
       line-height: normal;
       padding: 7px;
   
       .name {
        white-space: normal;
        overflow: auto;
        line-height: 30px;
       }
       .addr {
         font-size: 12px;
         color: #b4b4b4;
       }
   
       .highlighted .addr {
         color: #ddd;
       }
     }
   }
 </style>  
<style lang="scss" scoped>
#top {
  border-bottom: 1px solid rgb(226, 217, 217);
  padding-bottom: 20px;
}
.new{
  display: flex;
  flex-direction: column;
}
.new .one .horizontal-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-content: space-between;
  align-items: center;
  list-style: none;
}

.new .one .horizontal-list .label {
  font-weight: 600;
  font-size: 15px;
  color: #222229;
}

.new .one .horizontal-list .label span {
  font-weight:100;
  font-size: 13px;
  color: #747474;
}

.left {
  width: 60%;
  height: 500px;
  border-right: 1px solid rgb(226, 217, 217);
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.left p {
  color: #747474;
  width: 80%;
  margin: 0 10%;
  margin-top: 20px;
  font-size: 14px;
}

.left .images {
  width: 80%;
  margin: 0 10%;
  display: flex;
  /* 使用 flex 布局 */
  flex-wrap: wrap;
  /* 允许子元素换行 */
  align-content: flex-start;
  /* 从顶部开始排列 */

}

.left .images .tu {
  width: 130px;
  height: 130px;
  // background: saddlebrown;
  margin: 10px;
  border-radius: 10px;

}


.left .love {
  font-size: 23px;
  margin-left: 85%;
  padding-right: 50px;
}


.right {
  width: 38%;
  height: 500px;
  float: right;

}

.right h3 {
  padding-left: 50px;
  color: #333333;
  font-size: 20px;
  font-weight: 550;
}

.right .right_one {
  margin-left: 50px;
  width: 80%;
  min-height: 80px;
  // background: saddlebrown;
  margin-bottom: 5px;
  border-bottom: 1px solid rgb(226, 217, 217);
  padding: 10px 0;
  color: #333333;
}

.right .right_one .one span {
  font-size: 12px;
  padding-left: 20px;
}

#a {
  font-size: 14px;
  font-weight: 600;
}

.right .right_one .two {
  font-size: 14px;
  padding-top: 10px;
  padding-left: 20px;
}

::v-deep .el-autocomplete{
  width: 95% !important;
}
::v-deep .el-textarea__inner{
 border:none !important;
}
::v-deep .el-textarea__inner:hover{
 border:none !important;
}






.bottom {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}




.dialog {
  // background-color: #fff;
  padding: 20px;
  width: 80%;

  .dia-box {
    border: 1px solid #c9c6c6;
    border-radius: 10px;
    min-height: 100px;
    padding: 10px;
    display: flex;
    flex-direction: column;

    textarea {
      border: none;
      height: 70px;
      margin-top: 15px;
    }

    textarea:focus {
      outline: none;
    }

    .dia-btn {
      display: flex;
      flex-direction: row-reverse;

      .blue-button {
        color: #fff;
        background-color: #0078fb !important;
        border-color: #0078fb !important;
        width:80px;margin: 15px 15px 0 0;
      }
    }
  }
}
</style>